import React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import _ from 'lodash';
import qs from 'qs';

import { addTab } from '@/utils/utils';
import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card,
  Row,
  Col,
  Select,
  Button,
  Table,
  Modal,
  Badge,
  Divider,
  Input,
  message,
  Checkbox,
  Empty,
  Spin,
} from 'antd';

import {
  QuestionCircleTwoTone,
  InfoCircleTwoTone,
  StopTwoTone,
} from '@ant-design/icons';

import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;
const { pathname } = window.location;

const statusObj = {
  1: '待审核',
  2: '合作中',
  3: '已驳回',
  4: '终止合作',
};

const statusMap = {
  1: 'warning',
  2: 'processing',
  3: 'error',
  4: 'default',
};

const businessObj = {
  1: '派件',
  2: '揽件',
};

interface PreReChargeAuditProps extends FormComponentProps {
  dispatch: Dispatch;
  location: any;
  loading: boolean;
  auditList: any;
  partnerGarden: any;
  INITINFO: any;
  hasPath: string;
}

interface PreReChargeAuditState {
  searchValues: any;
  pageIndex: number;
  pageSize: number;
  auditInfo: any;
  parnterModal: boolean;
  adoptModal: boolean;
  banModal: boolean;
  refuseModal: boolean;
  changeRelieveModal: boolean;
  relieveModal: boolean;
  remarkModal: boolean;
  arrearsModal: boolean;
  adoptInfo: any;
}

@connect(
  ({
    preReChargeAudit: { auditList, partnerGarden },
    common: { INITINFO },
    global: { hasPath },
    loading,
  }: any) => ({
    auditList,
    partnerGarden,
    INITINFO,
    hasPath,
    loading: loading.effects['preReChargeAudit/fetch'],
  }),
)
class PreReChargeAuditDock extends React.Component<PreReChargeAuditProps, PreReChargeAuditState> {
  columns = [
    {
      title: '预充值账户',
      dataIndex: 'company_phone',
      width: 150,
    },
    {
      title: '申请人姓名',
      dataIndex: 'exp_contact_name',
      width: 150,
    },
    {
      title: '申请人手机号',
      dataIndex: 'exp_contact_phone',
      width: 150,
    },
    {
      title: '快递公司',
      dataIndex: 'express_name',
      width: 120,
    },
    {
      title: '合作业务',
      dataIndex: 'work_ways',
      width: 150,
      render: (text: string) => (
        <span>{String(text).split(',').map((item: any) => businessObj[Number(item)]).join(',')}</span>
      ),
    },
    {
      title: '申请时间',
      dataIndex: 'create_time',
      width: 180,
    },
    {
      title: '审核人',
      dataIndex: 'process_user_name',
      width: 100,
    },
    {
      title: '审核时间',
      dataIndex: 'process_time',
      width: 180,
    },
    /* {
      title: '欠费是否能入库',
      dataIndex: 'arrears_available',
      width: 150,
      render: (text: any, record: any) => (
        record.work_ways && record.work_ways.includes('1')
          ? (
            <span
              className="operLink"
              onClick={() => this.openArrearsDialog(record.logis_name, record.bind_id)}
            >
              {text === 1 ? '能' : '不能'}
            </span>
          )
          : ''
      ),
    }, */
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
      render: (text: any) => (
        <Badge
          status={statusMap[text]}
          text={statusObj[text]}
        />
      ),
    },
    {
      title: '操作',
      fixed: 'right',
      dataIndex: 'bind_id',
      width: 120,
      render: (id: number, record: any) => {
        if (record.status === 1) {
          return (
            <>
              <span className="operLink" onClick={() => this.openAllowDialog(record.logis_name, id)}>
                通过
              </span>
              <Divider type="vertical" />
              <span className="operLink" onClick={() => this.openRefuseDialog(record.logis_name, id)}>
                驳回
              </span>
            </>
          );
        }

        if (record.status === 2) {
          return (
            <span className="operLink" onClick={() => this.openChangeRelieveDialog(record.logis_name, id)}>
              解除合作
            </span>
          );
        }

        return null;
      },
    },
    {
      title: '备注',
      fixed: 'right',
      dataIndex: 'bind_id',
      width: 80,
      render: (id: number, record: any) => (
        <span className="operLink" onClick={() => this.openRemarkDialog(record.logis_name, id)}>
          查看
        </span>
      ),
    },
  ];

  state: PreReChargeAuditState = {
    searchValues: {},
    pageIndex: 1,
    pageSize: 5,
    auditInfo: {},
    parnterModal: false,
    adoptModal: false,
    banModal: false,
    refuseModal: false,
    changeRelieveModal: false,
    relieveModal: false,
    remarkModal: false,
    arrearsModal: false,
    adoptInfo: {},
  };

  static getDerivedStateFromProps(nextProps: any) {
    const { location: { query } } = nextProps;
    return { searchValues: query };
  }

  componentDidMount() {
    this.setFieldsValue();
    this.fetchAction('common/fetchLogisList');
    this.fetchAction('common/fetchExpressList2');

    this.fetchPartner();

    const { auditList, hasPath } = this.props;
    if (auditList?.length && !hasPath) return;
    if (hasPath) {
      const { dispatch } = this.props;
      dispatch({ type: 'global/clearPath' });
    }

    this.fetchDataValues();
  }

  componentDidUpdate(prevProps: any, prevState: any) {
    const { searchValues, pageIndex, pageSize } = this.state;
    if (!_.isEqual(searchValues, prevState.searchValues)) {
      this.setFieldsValue();
      this.fetchDataValues();
      this.fetchFirstPagePartner();
    } else if (!_.isEqual(searchValues, prevState.searchValues)
      || prevState.pageIndex !== pageIndex
      || prevState.pageSize !== pageSize) {
      this.fetchPartner();
    }
  }

  fetchFirstPagePartner = () => {
    this.setState({ pageIndex: 1 }, () => this.fetchPartner());
  }

  fetchPartner = () => {
    const { pageIndex, pageSize } = this.state;

    const { dispatch } = this.props;
    dispatch({
      type: 'preReChargeAudit/fetchPartner',
      payload: { pageIndex, pageSize },
    });
  }

  // 设置表单
  setFieldsValue = () => {
    const { searchValues } = this.state;
    const { form: { setFieldsValue } } = this.props;
    setFieldsValue(searchValues);
  };

  // 获取数据
  fetchDataValues = () => this.fetchAction('fetch', this.getQueryParams());

  // 获取参数
  getQueryParams = () => {
    const { searchValues } = this.state;
    const params = {
      ...searchValues,
    };
    return params;
  };

  openPartnerModal = () => {
    this.setState({ parnterModal: true });
  }

  findCurrentRow = (logis_name: string, id: number) => {
    const { auditList } = this.props;
    const { company_bind_list } = auditList.find((item: any) => item.logis_name === logis_name);
    let auditInfo;
    for (let i = 0; i < company_bind_list.length; i += 1) {
      auditInfo = {
        ...company_bind_list[i].bind_list
          .find((subItem: any) => subItem.bind_id === id),
      };
      if (Object.keys(auditInfo).length) break;
    }
    return auditInfo;
  }

  openAllowDialog = (logis_name: string, id: number) => {
    const auditInfo = this.findCurrentRow(logis_name, id);
    this.setState({ auditInfo, adoptModal: true });
  }

  openArrearsDialog = (logis_name: string, id: number) => {
    const auditInfo = this.findCurrentRow(logis_name, id);
    this.setState({ auditInfo, arrearsModal: true });
  }

  openRefuseDialog = (logis_name: string, id: number) => {
    const auditInfo = this.findCurrentRow(logis_name, id);
    this.setState({ auditInfo, refuseModal: true });
  }

  openChangeRelieveDialog = (logis_name: string, id: number) => {
    const auditInfo = this.findCurrentRow(logis_name, id);

    if (auditInfo.work_ways.split(',').length > 1) {
      this.setState({ auditInfo, changeRelieveModal: true });
    } else {
      this.setState({ auditInfo, relieveModal: true });
    }
  }

  openRelieveDialog = () => {
    this.setState({ relieveModal: true });
  }

  openRemarkDialog = (logis_name: string, id: number) => {
    const auditInfo = this.findCurrentRow(logis_name, id);
    this.setState({ auditInfo, remarkModal: true });
  }

  hidePartnerModal = () => {
    this.setState({ parnterModal: false });
  }

  hideAllowDialog = () => {
    this.setState({ adoptModal: false, adoptInfo: {} });
  }

  hideBanDialog = () => {
    this.setState({ banModal: false });
  }

  hideRefuseDialog = () => {
    this.setState({ refuseModal: false, adoptInfo: {} });
  }

  hideChangeRelieveDialog = (keep = false) => {
    if (keep) {
      this.setState({ changeRelieveModal: false });
    } else {
      this.setState({ changeRelieveModal: false });
    }
  }

  hideRelieveDialog = () => {
    this.setState({ relieveModal: false });
  }

  hideRemarkDialog = () => {
    this.setState({ remarkModal: false });
  }

  hideArrearsDialog = () => {
    this.setState({ arrearsModal: false });
  }

  changeName = (e: any) => {
    const { adoptInfo } = this.state;
    adoptInfo.logisContactName = e.target.value;

    this.setState({ adoptInfo });
  }

  changePhone = (e: any) => {
    const { adoptInfo } = this.state;
    adoptInfo.logisContactPhone = e.target.value.replace(/ /g, '').replace(/[^\d]/g, '');

    this.setState({ adoptInfo });
  }

  changeRemark = (e: any) => {
    const { adoptInfo } = this.state;
    adoptInfo.processRemark = e.target.value;

    this.setState({ adoptInfo });
  }

  changeBusiness = (values: any) => {
    const { auditInfo } = this.state;
    auditInfo.work_ways = values.toString();

    this.setState({ auditInfo });
  }

  handleAllow = () => {
    const { adoptInfo, auditInfo } = this.state;

    if (!adoptInfo.logisContactName) {
      message.error('负责人姓名不能为空');
      return;
    }

    if (!adoptInfo.logisContactPhone) {
      message.error('电话不能为空');
      return;
    }

    const { dispatch } = this.props;
    dispatch({
      type: 'preReChargeAudit/allow',
      payload: {
        params: {
          bindId: auditInfo.bind_id,
          ...adoptInfo,
        },
        search: this.getQueryParams(),
      },
    }).then((res: any) => {
      if (res.code !== 0) {
        this.setState({ auditInfo, banModal: true });
      }
    });

    this.hideAllowDialog();
  }

  handleRefuse = () => {
    const { adoptInfo, auditInfo } = this.state;

    if (!adoptInfo.logisContactName) {
      message.error('负责人姓名不能为空');
      return;
    }

    if (!adoptInfo.logisContactPhone) {
      message.error('电话不能为空');
      return;
    }

    if (!adoptInfo.processRemark) {
      message.error('驳回原因不能为空');
      return;
    }

    const params = {
      bindId: auditInfo.bind_id,
      ...adoptInfo,
    };

    const { dispatch } = this.props;
    dispatch({
      type: 'preReChargeAudit/refuse',
      payload: {
        params,
        search: this.getQueryParams(),
      },
    });

    this.hideRefuseDialog();
  }

  handleChangeRelieve = () => {
    this.hideChangeRelieveDialog(true);
    this.openRelieveDialog();
  }

  handleRelieve = () => {
    const { auditInfo } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'preReChargeAudit/relieve',
      payload: {
        params: { bindId: auditInfo.bind_id, unbindWorkWays: auditInfo.work_ways },
        search: this.getQueryParams(),
      },
    });

    this.hideRelieveDialog();
  }

  handleArrears = () => {
    const { auditInfo } = this.state;

    const { dispatch } = this.props;
    dispatch({
      type: 'preReChargeAudit/arrears',
      payload: {
        params: { bindId: auditInfo.bind_id },
        search: this.getQueryParams(),
      },
    });

    this.hideArrearsDialog();
  }

  handleRemark = () => {
    this.hideRemarkDialog();
  }

  /**
   * 查询
   */
  handleSearch = (e: React.FormEvent) => {
    e.preventDefault();

    const { form: { validateFields } } = this.props;
    validateFields((errors, values) => {
      if (errors) return;

      const query = {
        ...values,
      };

      const { dispatch, location: { query: prevQuery } } = this.props;

      Object.keys(query).forEach((item: any) => !query[item] && delete query[item]);
      if (!_.isEqual(query, prevQuery)) {
        addTab(dispatch, {
          name: '预充值审核管理',
          url: `${pathname}?${qs.stringify(query)}`,
          isTopMenu: true,
        });
      } else {
        this.fetchDataValues();
        this.fetchPartner();
      }
    });
  };

  /**
   * 重置
   */
  handleReset = () => {
    const { form: { resetFields } } = this.props;
    resetFields();

    const { dispatch } = this.props;
    addTab(dispatch, {
      name: '预充值审核管理',
      url: pathname,
      isTopMenu: true,
    });
  };

  /**
   * 分页
   */
  onSelectChange = (pageIndex: number, pageSize: number) => {
    this.setState({ pageIndex, pageSize });
  };

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    const type = typeName.indexOf('common') >= 0
      ? typeName : `preReChargeAudit/${typeName}`;
    dispatch({
      type,
      payload,
    });
  };

  renderSearchElem = () => {
    const {
      form: { getFieldDecorator },
      INITINFO: { logisList, expressList },
    } = this.props;

    return (
      <Card bordered={false} className="searchForm">
        <Form className="tableListForm" onSubmit={this.handleSearch}>
          <Row gutter={12}>
            <Col md={6} sm={24}>
              <Item label="物流中心" colon={false}>
                {getFieldDecorator('logisId')(
                  <Select
                    showSearch
                    allowClear
                    placeholder="请选择"
                    filterOption={(input: any, option: any) => (
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    )}
                  >
                    {logisList.map((item: any) => (
                      <Option value={String(item.id)} key={item.id}>
                        {item.name}
                      </Option>
                    ))}
                  </Select>,
                )}
              </Item>
            </Col>
            <Col md={6} sm={24}>
              <Item label="快递公司" colon={false}>
                {getFieldDecorator('expressId')(
                  <Select
                    showSearch
                    allowClear
                    placeholder="请选择"
                    filterOption={(input: any, option: any) => option.props.children
                      .toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    {expressList.map((express: any) => (
                      <Option
                        value={String(express.id)}
                        key={express.id}
                        style={{
                          backgroundImage: `url(${express.img})`,
                          backgroundSize: '18px,18px',
                          backgroundRepeat: 'no-repeat',
                          backgroundPosition: '8px center',
                          padding: '0 33px ',
                          lineHeight: '32px',
                        }}
                      >
                        {express.name}
                      </Option>
                    ))}
                  </Select>,
                )}
              </Item>
            </Col>
            <Col md={6} sm={24}>
              <Item label="状态" colon={false}>
                {getFieldDecorator('status')(
                  <Select
                    showSearch
                    allowClear
                    placeholder="请选择"
                  >
                    {Object.keys(statusObj).map((key: any, index: number) => (
                      <Option
                        key={key}
                        value={key}
                      >
                        {statusObj[key]}
                      </Option>
                    ))}
                  </Select>,
                )}
              </Item>
            </Col>
            <Col md={6} sm={24}>
              <div className="flexFeView">
                <Button
                  type="primary"
                  htmlType="submit"
                  className="smallButton"
                >
                  查询
                </Button>
                <Button
                  type="primary"
                  className="addButton smallButton marginL16"
                  onClick={this.handleReset}
                >
                  重置
                </Button>
              </div>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }

  renderParnterDialogElem = () => {
    const { parnterModal, pageIndex, pageSize } = this.state;
    const { partnerGarden } = this.props;

    const columns = [
      {
        title: '物流中心',
        dataIndex: 'logis_name',
      },
      {
        title: '合作业务',
        dataIndex: 'work_ways',
        render: (text: string) => (
          <span>{String(text).split(',').map((item: any) => businessObj[Number(item)]).join(',')}</span>
        ),
      },
    ];

    const pagination: object = {
      total: partnerGarden.count,
      current: pageIndex,
      pageSize,
      showSizeChanger: true,
      pageSizeOptions: ['5', '10'],
      showTotal: () => `共${partnerGarden.count}条数据`,
      onChange: this.onSelectChange,
      onShowSizeChange: this.onSelectChange,
    };

    return (
      <Modal
        title="合作中校园"
        visible={parnterModal}
        onOk={this.hidePartnerModal}
        onCancel={this.hidePartnerModal}
        footer={null}
      >
        <Table
          rowKey="logis_name"
          columns={columns}
          dataSource={partnerGarden.list}
          pagination={pagination}
        />
      </Modal>
    );
  }

  render() {
    const {
      adoptModal,
      banModal,
      refuseModal,
      changeRelieveModal,
      relieveModal,
      remarkModal,
      arrearsModal,
      auditInfo,
      adoptInfo,
    } = this.state;

    const {
      partnerGarden,
      auditList,
      loading,
    } = this.props;

    const columns_list = auditList.map(() => [...this.columns]);

    return (
      <>
        <PageHeader />

        {this.renderSearchElem()}

        <Spin spinning={loading}>
          <Card
            bordered={false}
            className="tableList"
            extra={
            (
              <div onClick={this.openPartnerModal}>
                <Button type="link">
                  合作中校园
                </Button>
                <span style={{ color: 'green', cursor: 'pointer' }}>{partnerGarden.count}</span>
              </div>
            )
          }
          >
            {
            auditList.map((audit: any, index: number) => {
              const { company_bind_list } = audit;
              const dataSource = company_bind_list.reduce((origin: any, item: any) => {
                const { bind_list, company_phone } = item;
                bind_list.forEach((sub_item: any) => {
                  sub_item.logis_name = audit.logis_name;
                  sub_item.company_phone = company_phone;
                });
                origin = [...origin, ...bind_list];
                return origin;
              }, []);

              const accountList = dataSource.map((item: any) => item.company_phone);
              const unRepeat = [...new Set(accountList)];
              const poses = unRepeat.map(account => accountList.indexOf(account));

              columns_list[index][0] = {
                title: '预充值账户',
                dataIndex: 'company_phone',
                width: 150,
                render: (value: any, row: any, pos: number) => {
                  const obj = {
                    children: value,
                    props: { rowSpan: 0 },
                  };

                  if (poses.includes(pos)) {
                    const pos_index = poses.indexOf(pos);
                    if (poses[pos_index + 1]) {
                      obj.props.rowSpan = poses[pos_index + 1] - poses[pos_index];
                    } else {
                      obj.props.rowSpan = dataSource.length - poses[pos_index];
                    }
                  }

                  return obj;
                },
              };

              return (
                <Card key={audit.logis_name} title={audit.logis_name} className="garden">
                  <Table
                    rowKey="bind_id"
                    tableLayout="fixed"
                    className="statementTable"
                    columns={columns_list[index]}
                    dataSource={dataSource}
                    pagination={false}

                    scroll={{ x: 1400 }}
                  />
                </Card>
              );
            })
          }
            { auditList.length === 0 && (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
          </Card>
        </Spin>

        <Modal
          title={
            <div>
              <QuestionCircleTwoTone />
              <span style={{ marginLeft: 8 }}>通过确认</span>
            </div>
          }
          visible={adoptModal}
          onOk={this.handleAllow}
          onCancel={this.hideAllowDialog}
        >
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item>
                确定通过【{auditInfo.exp_contact_name}】【{auditInfo.express_name}】的合作申请？
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item label="物流中心负责人">
                <Input
                  allowClear
                  placeholder="请输入"
                  maxLength={5}
                  value={adoptInfo.logisContactName}
                  onChange={this.changeName}
                />
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item label="联系电话　　　">
                <Input
                  allowClear
                  placeholder="请输入"
                  maxLength={15}
                  value={adoptInfo.logisContactPhone}
                  onChange={this.changePhone}
                />
              </Item>
            </Col>
          </Row>
        </Modal>

        <Modal
          title={
            <div>
              <StopTwoTone twoToneColor="red" />
              <span style={{ marginLeft: 8 }}>禁止通过</span>
            </div>
          }
          visible={banModal}
          onCancel={this.hideBanDialog}
          footer={
            <div style={{ textAlign: 'center' }}>
              <Button type="primary" onClick={this.hideBanDialog}>知道了</Button>
            </div>
          }
        >
          【{auditInfo.express_name}】申请时的合同已失效，请驳回申请后，建立新合同联系快递公司再次发起申请。
        </Modal>

        <Modal
          title={
            <div>
              <QuestionCircleTwoTone />
              <span style={{ marginLeft: 8 }}>驳回确认</span>
            </div>
          }
          visible={refuseModal}
          onOk={this.handleRefuse}
          onCancel={this.hideRefuseDialog}
        >
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item>
                确定驳回【{auditInfo.exp_contact_name}】【{auditInfo.express_name}】的合作申请？
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item label="物流中心负责人">
                <Input
                  allowClear
                  placeholder="请输入"
                  maxLength={5}
                  value={adoptInfo.logisContactName}
                  onChange={this.changeName}
                />
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item label="联系电话　　　">
                <Input
                  allowClear
                  placeholder="请输入"
                  maxLength={15}
                  value={adoptInfo.logisContactPhone}
                  onChange={this.changePhone}
                />
              </Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Item label="驳回原因　　　">
                <Input
                  allowClear
                  placeholder="请输入"
                  maxLength={15}
                  value={adoptInfo.processRemark}
                  onChange={this.changeRemark}
                />
              </Item>
            </Col>
          </Row>
        </Modal>

        <Modal
          title={
            <div>
              <QuestionCircleTwoTone />
              <span style={{ marginLeft: 8 }}>选择解除合作业务</span>
            </div>
          }
          visible={changeRelieveModal}
          onOk={this.handleChangeRelieve}
          onCancel={() => this.hideChangeRelieveDialog()}
        >
          <Row gutter={24}>
            <Col md={16} sm={16}>
              <Checkbox.Group
                value={auditInfo.work_ways?.split(',')}
                options={
                  Object.keys(businessObj)
                    .map((key: any) => ({ label: businessObj[key], value: key }))
                }
                onChange={this.changeBusiness}
              />
            </Col>
          </Row>
          <span style={{
            position: 'absolute',
            bottom: 16,
            fontSize: 12,
            color: '#f00',
          }}
          >
            注：修改合作后实时生效
          </span>
        </Modal>

        <Modal
          title={
            <div>
              <QuestionCircleTwoTone />
              <span style={{ marginLeft: 8 }}>解除合作确认</span>
            </div>
          }
          visible={relieveModal}
          onOk={this.handleRelieve}
          onCancel={this.hideRelieveDialog}
        >
          确定解除【{auditInfo.exp_contact_name}】【{auditInfo.express_name}】【{auditInfo.work_ways?.split(',').map((item: any) => businessObj[Number(item)]).join(',')}】的合作申请？

          <span style={{
            position: 'absolute',
            left: 18,
            bottom: 16,
            fontSize: 12,
            color: '#f00',
          }}
          >
            注：解除合作后实时生效
          </span>
        </Modal>

        <Modal
          title={
            <div>
              <InfoCircleTwoTone />
              <span style={{ marginLeft: 8 }}>查看备注</span>
            </div>
          }
          visible={remarkModal}
          onCancel={this.hideRemarkDialog}
          footer={
            <div style={{ textAlign: 'center' }}>
              <Button type="primary" onClick={this.hideRemarkDialog}>知道了</Button>
            </div>
          }
        >
          {auditInfo.apply_remark}
        </Modal>

        <Modal
          title={
            <div>
              <QuestionCircleTwoTone />
              <span style={{ marginLeft: 8 }}>欠费入库确认</span>
            </div>
          }
          visible={arrearsModal}
          onCancel={this.hideArrearsDialog}
          onOk={this.handleArrears}
        >
          <div style={{ textAlign: 'center' }}>确认修改为【{auditInfo.arrears_available === 1 ? '不能' : '能'}】欠费入库？</div>
        </Modal>

        { this.renderParnterDialogElem()}
      </>
    );
  }
}

export default Form.create<PreReChargeAuditProps>()(PreReChargeAuditDock);
